<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<canvas id="canvas" style="border: 1px solid blue;"></canvas>
		<br />
		<button onclick="change()">反色</button>
		<button onclick="black()">黑白</button>
		<button onclick="light()">变亮</button>
		<button onclick="dark()">变暗</button>
		<button onclick="classic()">复古</button>
		<button onclick="red()">红色</button>
		<button onclick="blue()">蓝色</button>
		<button onclick="green()">绿色</button>
		<button onclick="lucency()">透明</button>
		<br />
		<input type="file" onchange="selectImage(this);" />
	</body>
	<script type="text/javascript">
		canvas = document.getElementById('canvas')
		cxt = canvas.getContext('2d')
		var img = new Image();
		img.src = "img/R-C.jpg"
		img.onload = function() {
			cxt.drawImage(img, 10, 10);

		}

		function selectImage(file) {
			if(!file.files || !file.files[0]) {
				return;
			}
			var reader = new FileReader();
			reader.onload = function(evt) {
				document.getElementById('image').src = evt.target.result;
				image = evt.target.result;
			}
			reader.readAsDataURL(file.files[0]);
		}

		function change() {
			var imgdata = cxt.getImageData(10, 10, 120, 120);
			var data = imgdata.data
			for(var i = 0; i < data.length; i += 4) {
				data[i + 0] = 255 - data[i + 0]
				data[i + 1] = 255 - data[i + 1]
				data[i + 2] = 255 - data[i + 2]
			}
			cxt.putImageData(imgdata, 150, 10);
		}

		function black() {
			imgdata = cxt.getImageData(10, 10, 120, 120);
			data = imgdata.data
			for(var i = 0; i < data.length; i += 4) {
				var avg = data[i + 0] * 0.3 + data[i + 1] * 0.6 + data[i + 2] * 0.1
				data[i + 0] = avg
				data[i + 1] = avg
				data[i + 2] = avg
			}
			cxt.putImageData(imgdata, 150, 10);
		}

		function light() {
			imgdata = cxt.getImageData(10, 10, 120, 120);
			data = imgdata.data
			for(var i = 0; i < data.length; i += 4) {
				var a = 50
				data[i + 0] += a
				data[i + 1] += a
				data[i + 2] += a
			}
			cxt.putImageData(imgdata, 150, 10);
		}

		function dark() {
			imgdata = cxt.getImageData(10, 10, 120, 120);
			data = imgdata.data
			for(var i = 0; i < data.length; i += 4) {
				var a = -50
				data[i + 0] += a
				data[i + 1] += a
				data[i + 2] += a
			}
			cxt.putImageData(imgdata, 150, 10);
		}

		function classic() {
			imgdata = cxt.getImageData(10, 10, 120, 120);
			data = imgdata.data
			for(var i = 0; i < data.length; i += 4) {
				r = data[i + 0]
				g = data[i + 1]
				b = data[i + 2]
				data[i + 0] = r * 0.39 + g * 0.76 + b * 0.18
				data[i + 1] = r * 0.35 + g * 0.68 + b * 0.16
				data[i + 2] = r * 0.27 + g * 0.53 + b * 0.13
			}
			cxt.putImageData(imgdata, 150, 10);
		}

		function red() {
			imgdata = cxt.getImageData(10, 10, 120, 120);
			data = imgdata.data
			for(var i = 0; i < data.length; i += 4) {
				r = data[i + 0]
				g = data[i + 1]
				b = data[i + 2]
				var avg = (r + g + b) / 3
				data[i + 0] = avg
				data[i + 1] = 0
				data[i + 2] = 0
			}
			cxt.putImageData(imgdata, 150, 10);
		}

		function blue() {
			imgdata = cxt.getImageData(10, 10, 120, 120);
			data = imgdata.data
			for(var i = 0; i < data.length; i += 4) {
				r = data[i + 0]
				g = data[i + 1]
				b = data[i + 2]
				var avg = (r + g + b) / 3
				data[i + 0] = 0
				data[i + 1] = 0
				data[i + 2] = avg
			}
			cxt.putImageData(imgdata, 150, 10);
		}

		function green() {
			imgdata = cxt.getImageData(10, 10, 120, 120);
			data = imgdata.data
			for(var i = 0; i < data.length; i += 4) {
				r = data[i + 0]
				g = data[i + 1]
				b = data[i + 2]
				var avg = (r + g + b) / 3
				data[i + 0] = 0
				data[i + 1] = avg
				data[i + 2] = 0
			}
			cxt.putImageData(imgdata, 150, 10);
		}

		function lucency() {
			imgdata = cxt.getImageData(10, 10, 120, 120);
			data = imgdata.data
			for(var i = 0; i < data.length; i += 4) {
				data[i + 3] *= 0.3
			}
			cxt.putImageData(imgdata, 150, 10);
		}
	</script>

</html>